<template>
  <!-- 达人堂得特权 -->
  <div class="DaRentang">
    <div>
      <header_ title="" :pathName="this.$store.state" background='#00000000' color='#000000' image_='1' size='4.8vw' />
    </div>
    <div>
      <div class="gift">
        <div class="nth_one">
          <div>当前玫瑰数量</div>
          <div>{{ gift_num }}</div>
        </div>
        <div class="nth_two">
          <img v-if="lidao" @click="leaderSign" src="../../public/img/signin/darentang/button1.png" alt="" />
          <img v-else @click="leaderSign" src="../../public/img/signin/darentang/button2@2x(1).png" alt="" />
          <img @click="buygift" src="../../public/img/signin/darentang/button2.png" alt="" />
          <van-dialog v-model="show" title="购买玫瑰花" show-cancel-button class="model_img" :show-confirm-button="modelqs"
            :showCancelButton="modelqs" :close-on-click-overlay="overlay">
            <div class="model_bidy">
              <input type="number" placeholder="请输入购买数量" v-model="number_list" />
              <div class="text_model">每朵玫瑰需 <span>10</span> 钻石</div>
              <img src="../../public/img/signin/darentang/button2.png" alt="" @click="gifv_meigui" />
            </div>
          </van-dialog>
        </div>
      </div>
    </div>

    <div>
      <ul class="tab-tilte">
        <li @click="cur = 0" :class="{ active: cur == 0 }"></li>
        <li @click="cur = 1" :class="{ active: cur == 1 }"></li>
      </ul>
      <div class="tab-content" v-show="cur == 0" :style="{ height: heighr_ + 'vw' }">
        <div>
          <div>
            <div v-for="(item, index) in gift_rank" :key="index" :class="{ bg_index: index % 2 != 1 }">
              <div class="text_list4" v-if="index == 0">
                <img src="../../public/img/signin/darentang/1.png" alt="" />
              </div>
              <div class="text_list4" v-else-if="index == 1">
                <img src="../../public/img/signin/darentang/2.png" alt="" />
              </div>
              <div class="text_list4" v-else-if="index == 2">
                <img src="../../public/img/signin/darentang/3.png" alt="" />
              </div>
              <div v-else-if="index > 2" class="text_list4">
                {{ index + 1 }}
              </div>

              <img :src="item.headPic" alt="" />

              <div class="nickname">{{ item.nickname }}</div>

              <img id="level_" :src="
                  'https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/level/level' +
                  item.level +
                  '.png'
                " alt="" />
              <div class="num_">{{ item.num }}朵玫瑰</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tab-content_2" v-show="cur == 1">
        <div>
          <div class="img_biaoti" v-for="(item, index) in user_wall" :key="index" :class="'0' == index ? 'index_1' : ''"
            @click="open_usrt(item.user_id)">
            <img :src="item.head_pic" alt="" />
            <div>{{ item.nickname }}</div>
            <div>{{ item.add_date.substr(5, 5) }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="privilege">
      <div>
        <img src="../../public/img/signin/darentang/dart.png" alt="" />
      </div>
      <img class="first_" src="../../public/img/signin/darentang/first_.png" alt="" />
      <div class="first_gift">
        <div>
          <img src="http://img.xunyinjiaoyou.com/upload/medal/daren-static.png" alt=""
            style="width: 16.5vw; height: 17vw; z-index: 999" />
          <img src="../../public/img/signin/darentang/liwu_bg@2x.png" alt=""
            style="width: 25.5vw; height: 26vw; margin-top: -18vw" />
          <button>达人勋章</button>
        </div>
        <div>
          <div class="title_rq" style="position: relative; top: 0">7天</div>
          <img :src="url_img" alt="" style="width: 16.5vw; height: 17vw; margin-top: -3vw; z-index: 999" />
          <img src="../../public/img/signin/darentang/liwu_bg@2x.png" alt=""
            style="width: 25.5vw; height: 26vw; margin-top: -18vw" />
          <button>达人头像框</button>
        </div>
        <div>
          <img src="../../public/img/signin/darentang/gonggao@2x.png" alt=""
            style="width: 13vw; height: 8vw; margin-top: 4vw" />
          <img src="../../public/img/signin/darentang/liwu_bg@2x.png" alt=""
            style="width: 25.5vw; height: 26vw; margin-top: -13vw" />
          <button>全服公告</button>
        </div>
      </div>

      <img class="first_2" src="../../public/img/signin/darentang/two_.png" alt="" />
      <img class="first_3" src="../../public/img/signin/darentang/three_.png" alt="" />
      <div class="first_gift_">
        <div>
          <div class="title_rq">3天</div>
          <img :src="url_img_two" alt="" style="width: 16.5vw; height: 17vw; z-index: 999" />
          <img src="../../public/img/signin/darentang/liwu_bg@2x.png" alt=""
            style="width: 25.5vw; height: 26vw; margin-top: -18vw" />
          <button>达人头像框</button>
        </div>
        <div>
          <div class="title_rq">1天</div>
          <img :src="url_img_two" alt="" style="width: 16.5vw; height: 17vw" />
          <img src="../../public/img/signin/darentang/liwu_bg@2x.png" alt=""
            style="width: 25.5vw; height: 26vw; margin-top: -18vw" />
          <button>达人头像框</button>
        </div>
      </div>
      <div class="public_">
        <div class="nth_ongui">查看规则</div>
        <div class="nth_twgui">
          <div>1、每天获得玫瑰数量第一名获得达人称号</div>
          <div>2、达人头像框有效期分别为7天、3天、1天</div>
          <div>3、达人堂为永久有效，每天第一名获得</div>
          <div>4、获得玫瑰方式为每日签到或者购买</div>
        </div>
      </div>
    </div>
    <div class="bottom_img"></div>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import {
    Dialog
  } from "vant";
  import {
    Toast
  } from "vant";
  import header_ from '../../components/header_'
  export default {
    data() {
      return {
        url_img: "http://img.xunyinjiaoyou.com/upload/goods/202109/13/1631501701.png",
        url_img_two: "http://img.xunyinjiaoyou.com//upload/goods/202109/13/1631501729.png",
        userId: "",
        gift_rank: "", //今日榜
        user_wall: "", //达仁堂
        gift_num: "", //玫瑰数量
        cur: 0, //默认选中第一个tab
        show: false,
        modelqs: false,
        overlay: true,
        lidao: true,
        number_list: "", //购买钻石
      };
    },

    computed: {
      heighr_: function () {
        return this.gift_rank.length * 21.5 + 7;
      },
    },
    components: {
      header_
    },
    created() {
      this.leaderwall(); //达人墙
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        if (window.webkit) {
          window.webkit.messageHandlers.setStatusBarTheme.postMessage({
            setStatusBarTheme: 1,
          });
        }
      } else {
        app.setStatusBarTheme(1); 
      }
    },
    methods: {
      //点击头像进入个人主页
      open_usrt(user) {
        if (window.isWeixin) {
          wx.miniProgram.navigateTo({
            url: "/pages/me/me?memberId=" + user,
          });
        } else {
          if (window.isiOS) {
            console.log("isiOS环境");
            window.webkit.messageHandlers.openProfile.postMessage({
              userId: user,
            });
          } else {
            console.log("安卓环境");
            app.openProfile(user);
          }
        }
      },
      //确认购买
      gifv_meigui() {
        let timestamp = (Date.parse(new Date()) / 1000).toString();
        let arys = {
          num: this.number_list,
          userId: window.user_id,
          time: timestamp,
          token: window.userToken,
        };
        let _token = this.$.encryption(arys);
        let params = {
          num: this.number_list,
          time: timestamp,
          token: window.userToken,
          userId: window.user_id,
          sign: this.$.md5(_token),
        };
        this.$axios
          .post("/activity/buygift", this.$.qs.stringify(params))
          .then((res) => {
            Toast(res.data.text);
            this.show = false;
            this.leaderwall();
          })
          .catch((err) => {
            console.log(err);
          });
      },
      //达仁堂开局获取
      leaderwall() {
        let timestamp = (Date.parse(new Date()) / 1000).toString();
        let arys = {
          userId: window.user_id,
          time: timestamp,
          token: window.userToken,
        };
        let _token = this.$.encryption(arys);
        let params = {
          time: timestamp,
          userId: window.user_id,
          sign: this.$.md5(_token),
          token: window.userToken,
        };
        this.$axios
          .post("/activity/leaderwall", this.$.qs.stringify(params))
          .then((res) => {
            // console.log(res);
            if (res.data.status == 0) {
              this.gift_rank = res.data.result.gift_rank; //今日榜
              this.user_wall = res.data.result.user_wall; //达仁堂
              this.gift_num = res.data.result.gift_num; //玫瑰数
            } else {
              Toast(res.data.text);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      //签到得玫瑰
      leaderSign() {
        // console.log("签到");
        let timestamp = (Date.parse(new Date()) / 1000).toString();
        let arys = {
          userId: window.user_id,
          time: timestamp,
          token: window.userToken,
        };
        let _token = this.$.encryption(arys);
        let params = {
          token: window.userToken,
          time: timestamp,
          userId: window.user_id,
          sign: this.$.md5(_token),
        };
        this.$axios
          .post("/activity/leaderSign", this.$.qs.stringify(params))
          .then((res) => {
            Toast(res.data.text);
            this.lidao = false;
            this.leaderwall();
          })
          .catch((err) => {
            console.log(err);
          });
      },
      //购买玫瑰
      buygift() {
        this.show = true;
      },
    },
  };
</script>
<style scoped>
  .model_bidy {
    width: 94%;
    height: 52.8vw;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .model_bidy input {
    width: 90%;
    height: 12.8vw;
    border: 0;
    padding: 1vw 5%;
    background: #f6f6f6;
    margin-bottom: 4vw;
  }

  .model_bidy .text_model {
    color: #999999;
    font-size: 3.2vw;
    line-height: 3.9vw;
  }

  .text_model span {
    color: #f99560;
  }

  .model_bidy img {
    width: 40vw;
    height: 14vw;
    margin: 5vw auto 0;
  }

  .DaRentang {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #1f0066;
    font-family: PingFangSC-Regular, sans-serif;
  }

  .DaRentang>div:nth-of-type(1) {
    width: 100vw;
    height: 78vw;
    background: url("../../public/img/signin/darentang/bg1@2x.png") no-repeat;
    background-size: 100%;
  }

  .DaRentang>div:nth-of-type(2) {
    width: 92vw;
    height: 18.8vw;
    margin: 0 auto;
    background: url("../../public/img/signin/darentang/bg2@2x.png") no-repeat;
    background-size: 100%;
  }

  .DaRentang>div:nth-of-type(3) {
    width: 92vw;
    margin: 10vw auto;
    /* height: 188.8vw; */
  }

  .DaRentang>div:nth-of-type(4) {
    width: 92vw;
    height: 172.8vw;
    margin-left: 4vw;
  }

  .DaRentang div .gift {
    width: 82vw;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .DaRentang .gift>div {
    /* width: 50%; */
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .DaRentang div .gift .nth_one {
    display: flex;
    flex-direction: column;
    width: 40%;
    height: 78%;
  }

  .DaRentang div .gift .nth_one>div:nth-of-type(1) {
    font-size: 3.2vw;
    line-height: 9.2vw;
    width: 100%;
    height: 50%;
    color: #ffffff;
  }

  .DaRentang div .gift .nth_one>div:nth-of-type(2) {
    font-size: 4.3vw;
    width: 100%;
    height: 50%;
    color: #fff59b;
  }

  .DaRentang div .gift .nth_two {
    width: 60%;
    display: flex;
  }

  .DaRentang div .gift .nth_two>img {
    width: 23vw;
    height: 8vw;
  }

  .active {
    -webkit-filter: brightness(100%) !important;
    /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    filter: brightness(100%) !important;
  }

  .DaRentang>div:nth-of-type(3) .tab-tilte {
    width: 100%;
    height: 10.6vw;
    display: flex;
    justify-content: space-between;
  }

  .DaRentang>div:nth-of-type(3) .tab-tilte li {
    width: 49%;
    height: 10.6vw;
    display: flex;
    line-height: 10.6vw;
    background: url("../../public/img/signin/darentang/bg2@2x.png") no-repeat;
    background-size: 100%;
    -webkit-filter: brightness(80%);
    /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
    filter: brightness(80%);
  }

  .DaRentang>div:nth-of-type(3) .tab-tilte li:nth-of-type(1) {
    background: url("../../public/img/signin/darentang/shishi@2x.png") no-repeat;
    background-size: 100%;
  }

  .DaRentang>div:nth-of-type(3) .tab-tilte li:nth-of-type(2) {
    background: url("../../public/img/signin/darentang/daren@2x.png") no-repeat;
    background-size: 100%;
  }

  .DaRentang>div:nth-of-type(3) .tab-content {
    width: 92vw;
    border-radius: 10px;
    border: 2px solid #385eb9;
    margin-top: -5.3vw;
  }

  .DaRentang>div:nth-of-type(3) .tab-content .bg_index {
    background: linear-gradient(to right, #1f0066, #110c89, #1f0066);
  }

  .DaRentang>div:nth-of-type(3) .tab-content_2 {
    width: 92vw;
    border-radius: 10px;
    border: 2px solid #385eb9;
    margin-top: -5.3vw;
    height: 130.6vw;
  }

  .DaRentang>div:nth-of-type(3) .tab-content_2>div {
    margin: 0 auto;
    margin-top: 10.3vw;
    width: 100%;
    height: 114vw;
    overflow-y: scroll;
  }

  .DaRentang>div:nth-of-type(3) .tab-content_2>div>.img_biaoti {
    position: relative;
    width: 25.3vw;
    height: 26.3vw;
    margin-left: 3.2vw;
    margin-bottom: 3.2vw;
    float: left;
    border-radius: 2vw;
  }

  .DaRentang>div:nth-of-type(3) .tab-content_2>div>.img_biaoti img {
    position: absolute;
    width: 25.3vw;
    height: 25.3vw;
    border-radius: 2vw;
  }

  .img_biaoti>div:nth-of-type(1) {
    position: absolute;
    bottom: 1vw;
    left: 1vw;
    width: 15vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ffffff;
    font-size: 3.2vw;
  }

  .img_biaoti>div:nth-of-type(2) {
    position: absolute;
    bottom: 1vw;
    right: 1vw;
    font-size: 2.7vw;
    color: #ffffff;
  }

  .DaRentang>div:nth-of-type(3) .tab-content>div:nth-of-type(1) {
    width: 92vw;
  }

  .DaRentang>div:nth-of-type(3) .tab-content>div:nth-of-type(1)>div {
    width: 92vw;
    padding-top: 7vw;
  }

  /* 小盒子 */
  .DaRentang>div:nth-of-type(3) .tab-content>div:nth-of-type(1)>div>div {
    display: flex;
    align-items: center;
    width: 94%;
    margin: 0 auto;
    height: 21.5vw;
  }

  .DaRentang>div:nth-of-type(3) .tab-content>div:nth-of-type(1)>div>div>div>img {
    height: 5.6vw;
    width: 7.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text_list4 {
    height: 8vw;
    width: 10vw;
    font-size: 4.8vw;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .DaRentang>div:nth-of-type(3) .tab-content>div:nth-of-type(1)>div>div>img {
    display: flex;
    align-items: center;
    height: 11.2vw;
    width: 11.2vw;
    border-radius: 50%;
    margin-left: 2.1vw;
  }

  .DaRentang .nickname {
    color: #ffffff;
    font-size: 3.7vw;
    font-family: PingFangSC-Regular, sans-serif;
    margin-left: 2vw;
    overflow: hidden;
    /*超出部分隐藏*/
    white-space: nowrap;
    /*不换行*/
    text-overflow: ellipsis;
    /*超出部分文字以...显示*/
    width: 20vw;
  }

  .DaRentang>div>div #level_ {
    width: 7.5vw;
    height: 7.5vw;
  }

  .DaRentang>div>.tab-content .num_ {
    display: flex;
    flex: 1;
    height: 100%;
    color: #fff59b;
    font-size: 3.7vw;
    align-items: center;
    justify-content: center;
  }

  .privilege {
    width: 92vw;
    border-radius: 10px;
    border: 2px solid #385eb9;
    height: 130.6vw;
    position: relative;
  }

  .privilege>div:nth-of-type(1)>img {
    width: 56vw;
    height: 11.7vw;
    margin-top: -6vw;
    margin-left: 18vw;
  }

  .privilege .first_ {
    position: absolute;
    width: 28.8vw;
    height: 5.3vw;
  }

  .privilege .first_2 {
    position: absolute;
    width: 28.8vw;
    height: 5.3vw;
  }

  .privilege .first_3 {
    position: absolute;
    width: 28.8vw;
    height: 5.3vw;
    left: 38vw;
  }

  .first_gift {
    width: 100%;
    height: 49vw;
    display: flex;
    margin-bottom: 7vw;
    border-bottom: 2px solid #1f0066;
    /* background: ; */
  }

  .first_gift>div {
    position: relative;
    display: flex;
    height: 100%;
    width: 33%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, rgba(44, 5, 144, 1), rgba(42, 6, 144, 0));
  }

  .title_rq {
    position: relative;
    width: 6.1vw;
    height: 3.2vw;
    top: 3vw;
    left: 6vw;
    background: #fc4a8d;
    text-align: center;
    line-height: 4.2vw;
    font-size: 2.4vw;
    border-radius: 3vw;
    color: #ffffff;
  }

  .first_gift>div>button {
    font-size: 3.2vw;
    color: #ffffff;
    padding: 1vw 2vw;
    background: #6437d7;
    border-radius: 3vw;
    border: 0;
    line-height: 3.2vw;
  }

  .first_gift_ {
    width: 100%;
    height: 49vw;
    margin: 0 auto;
    display: flex;
    margin-bottom: 7vw;
    border-bottom: 2px solid #1f0066;
  }

  .first_gift_>div {
    display: flex;
    height: 100%;
    width: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, rgba(44, 5, 144, 1), rgba(42, 6, 144, 0));
  }

  .first_gift_>div>button {
    font-size: 3.2vw;
    color: #ffffff;
    padding: 1vw 2vw;
    background: #6437d7;
    border-radius: 3vw;
    border: 0;
    line-height: 3.2vw;
  }

  .public_ {
    width: 84vw;
    height: 48.8vw;
    margin: 0 auto;
    background: url("../../public/img/signin/darentang/guizhe@2x.png") no-repeat;
    background-size: 100%;
  }

  .public_ .nth_ongui {
    width: 100%;
    height: 13.6vw;
    text-align: center;
    line-height: 13.6vw;
    font-size: 4.8vw;
    color: #ffffff;
  }

  .public_ .nth_twgui {
    width: 80%;
    font-size: 3.2vw;
    /* text-align: center; */
    color: #ffffff;
    margin: 6.4vw auto;
  }

  .nth_twgui>div {
    font-family: PingFangSC-Regular, sans-serif;
    line-height: 5vw;
  }

  .bottom_img {
    width: 100vw;
    height: 21.3vw;
    background: url("../../public/img/signin/darentang/bg1_2@2x.png") no-repeat;
    background-size: cover;
    background-position: 0 100%;
  }

  .index_1 {
    width: 53.8vw !important;
    height: 52.8vw !important;
  }

  .index_1 img {
    width: 100% !important;
    height: 100% !important;
  }

  .index_1>div {
    width: 30vw !important;
  }

  .index_1>div:nth-of-type(2) {
    text-align: right;
  }

  .close_model {
    position: absolute;
    z-index: 999;
    color: #ffffff;
    background: #ffffff;
  }
</style>